import TyOverlayex from './TyOverlayex'
import $ from 'jquery'

// 自定义图标类
class TyIcon extends TyOverlayex {
  constructor(url, iconOptions) {
    super(iconOptions)
    this.url = url
    this.size = iconOptions.size || []
    this.id = 'icon_' + iconOptions.id
    this.offset = iconOptions.offset || []
    this.position = iconOptions.position
    this.container = iconOptions.container
    this.positioning = iconOptions.positioning ? iconOptions.positioning : 'top-left'
  }

  createHtmlElement() {
    const createDom = (html) => {
      const dom = $(html).appendTo($('body'))
      return dom[0]
    }
    if (!this.container) {
      const html = this.getInnerHtml()
      this.container = createDom(html)
    }
    return this.container
  }

  getInnerHtml() {
    if (!this.container) {
      const html = '<div class="Ol_Icon" style="position: absolute; margin: 0px; padding: 0px; overflow: hidden; z-index: 81">' +
        '<img style="display: block; border:none;margin-left:0px; margin-top:0px; ' +
        (this.size[0] ? ('width: ' + this.size[0] + 'px; ') : '') +
        (this.size[0] ? ('height: ' + this.size[1] + 'px; ') : '') +
        (this.offset[0] ? ('left: ' + this.offset[0] + 'px; ') : '') +
        (this.offset[0] ? ('top: ' + this.offset[1] + 'px; ') : '') +
        '" src="' + this.url + '"/>' +
        '</div>'
      return html
    } else {
      return this.container.innerHtml
    }
  }
  setImage(url) {
    this.url = url
    $(this.container).children('img').attr('src', url)
  }
}

export default TyIcon

